<template>
	<view class="content poRel">
		<view class="wid100 poAbs divBa " :style="'background: linear-gradient('+theme.main_color+' 55%, #F3F1F1);'"></view>
		<view class="poRel" style="z-index: 2;">
			<view class="wid90 mar">
				<view style="height: 60rpx;"></view>
				<view class="wid90 mar fowe600 coFFF">
					<view class="foSi25">当前余额（元）</view>
					<view class="foSi50 mar-top20 liH44">{{user_money}}</view>
				</view>
				<view class="dis disAl disJuB fowe600 coFFF mar-top30">
					<view class="dis disAl disJuC foSi25 hei80" @click="tiaozhuan('/pages/recharge/rechargeList')" style="width: 50%;">充值记录</view>
					<view class="bacFFF" style="width: 1rpx;height: 42rpx;"></view>
					<view class="dis disAl disJuC foSi25 hei80" @click="tiaozhuan('/pages/recharge/detail')" style="width: 50%;">消费明细</view>
				</view>
				<view class="mar-top30 bacFFF borRad20 ">
					<view class="wid90 mar fowe800 dis disAl foSi30" style="height: 92rpx;">我要充值</view>
					<view class="dis disAl disJuB flwa wid85 mar">
						<block v-for="(item, index) in list" :key="index">
							<view class="dis disAl mar-bott30 borRad20" style="width: 260rpx;height: 158rpx;" @click="xuanClick(index)"
								:style="xuan == index?'background-color: '+theme.main_color+';':'background-color: #EEEEEE;'">
								<view class="wid90 mar textCen">
									<view class="foSi40 liH40" :class="xuan == index?'coFFF':''">¥{{item.buy_price}}</view>
									<view class="mar-top20 foSi25" :style="xuan == index?'color: #A3E5AC;':'color: #636161;'">{{item.name}}</view>
								</view>
							</view>
						</block>
					</view>
					<view class="wid85 mar hei80 borRad20 dis disAl disJuC mar-bott20" style="background: #EEEEEE;">
						<view class="textCen fowe800 foSi40 liH40" style="color: #282828;width: 15%;">¥</view>
						<input type="digit" class="foSi25 wid80" v-model="zdy_money" placeholder="输入自定义金额"/>
					</view>
					<view class="wid90 mar mar-top10">
						<view style="height: 1rpx;background-color: #E5E5E5;"></view>
						<view class="dis disAl disJuB mar-top40">
							<view class="dis disAl">
								<image src="../../static/weixinzhifu.png" style="width: 38rpx;height: 31rpx;"></image>
								<view class="foSi30 fowe600 mar-left20">微信支付</view>
							</view>
							<view v-if="fukuan == 0" class="dis disAl disJuC borRad50" :style="'border: 1rpx solid '+theme.main_color+';'"
								style="width: 26rpx;height: 26rpx;">
								<view class="borRad50" :style="'background-color: '+theme.main_color+';'"
								style="width: 14rpx;height: 14rpx;"></view>
							</view>
							<view v-if="fukuan != 0" class="dis disAl disJuC borRad50" style="width: 26rpx;height: 26rpx;border: 1rpx solid #818181;"></view>
						</view>
						<!-- <view class="mar-top30 foSi22" style="color: #737373;">
							<view>1、充值的本金和赠送金额均不可提现、转移、转赠</view>
							<view class="mar-top10">2、适用范围：本平台所有项目均可购买，以及交通费支付</view>
						</view> -->
					</view>
					<view style="height: 40rpx;"></view>
				</view>
			</view>
		</view>
		<view class="poFix wid100 bacFFF" style="height: 120rpx;border-top: 4rpx solid #E2E0E0;bottom: 0;">
			<view class="dis disAl disJuB wid90 mar hei100">
				<view class="foSi40">
					<span style="color: #FF0000;">¥{{money?money:zdy_money}}</span>
					<span v-if="money!=0" class="foSi25 mar-left20" style="color: #737373;">送{{song_money}}元</span>
				</view>
				<view class="coFFF borRad40 dis disAl disJuC coFFF foSi35 hei80" :style="'background-color: '+theme.main_color+';'"
				style="width: 232rpx;" @click="zhufu">充值</view>
			</view>
		</view>
	</view>
</template>

<script>
	// #ifdef H5
	var jweixin = require('jweixin-module');
	// #endif
	export default {
		data() {
			return {
				url: this.global.url,
				xuan: -1,
				pay_type:1, //支付方式 1微信 3支付宝
				list: [],
				user_money:0,
				fukuan: 0,
				zdy_money:0,
				money: 0,
				song_money:0,
				xuanze:1,
				theme: null
			}
		},
		onLoad() {
			var that = this;
			that.theme = uni.getStorageSync('theme')
			that.getList()
		},
		methods: {
			zhufu() {
				var that = this
				if (that.money == 0 && that.zdy_money == 0) {
					return uni.showToast({
						title: '请选择或输入充值的金额',
						icon: 'none',
						duration: 2000
					})
				};
				
				if (that.xuanze == 1) {
					// #ifdef APP
					that.xuanze = 4 // 重置为APP微信支付
					that.pay_type = 4 // 重置为APP微信支付
					// #endif
				}
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/plugin/create_stored',
					method: 'POST',
					header: {
						'site-id': that.global.site_id,
						'token': uni.getStorageSync('token')
					},
					data: {
						'recharge_money': that.money != 0?that.list[that.xuan].give_price:that.zdy_money,
						'pay_money': that.money!=0?that.money:that.zdy_money,
						'stored_id': that.money!=0?that.list[that.xuan].id:0,
						'pay_type': that.pay_type,
					},
					success(res) {
						let result = res.data
						if(that.xuanze == 1 || that.xuanze == 4){
							if (result.code == 1) {
								console.log(result);
								// #ifdef H5
								jweixin.config({
									debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
									appId: result.data.appId, // 必填，公众号的唯一标识
									timestamp: result.data.timeStamp, // 必填，生成签名的时间戳
									nonceStr: result.data.nonceStr, // 必填，生成签名的随机串
									signature: result.data.paySign, // 必填，签名
									jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
								})
								jweixin.ready(function() {
									jweixin.chooseWXPay({
										appId: result.data.appId,
										package: result.data.package, //
										timestamp: result.data.timeStamp, // 时间戳
										nonceStr: result.data.nonceStr, // 随机数
										signType: result.data.signType,
										paySign: result.data.paySign, // 签名
										success: function() {
											// 支付成功
											uni.showModal({
												title: '提示',
												content: '支付成功',
												showCancel: false,
												success: function(res) {
													if (res.confirm) {
														uni.switchTab({
															url: '/pages/wode/wode',
														});
													}
												}
											})
										},
										cancel: function() {
											// 支付失败
											console.log(res)
											uni.showToast({
												title: '取消支付',
												icon: 'none',
												duration: 2000
											})
										},
										fail: function() {
											// 支付失败
											console.log(res)
											uni.showToast({
												title: '支付失败',
												icon: 'none',
												duration: 2000
											})
										}
									})
								})
								
								// #endif
								// #ifdef APP
								//调用微信官方支付接口弹出付款界面,输入密码扣款
								let back_info = result.data
								console.log('back_info',back_info)
								uni.requestPayment({
									provider: 'wxpay',
									orderInfo: { 
										"appid": back_info.appid,  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
										"package": back_info.package,        // 固定值
										"noncestr": back_info.noncestr, // 随机字符串
										"timestamp": back_info.timestamp,        // 时间戳（单位：秒）
										"sign": back_info.paySign, // 签名，这里用的 MD5/RSA 签名
										"prepayid": back_info.prepayid, // 统一下单订单号
										"partnerid": back_info.partnerid,      // 微信支付商户号
									}, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
									success: function() {
										// 支付成功
										uni.showModal({
											title: '提示',
											content: '支付成功',
											showCancel: false,
											success: function(res) {
												if (res.confirm) {
													uni.switchTab({
														url: '/pages/wode/wode',
													});
												}
											}
										})
									},
									fail: function(err) {
										// 支付失败
										console.log(res)
										uni.showToast({
											title: '支付失败',
											icon: 'none',
											duration: 2000
										})
									}
								});
								
								// #endif
							} else {
								that.userinfo = ''
								uni.showToast({
									title: result.msg,
									icon: 'none',
									duration: 2000
								})
							}
						}else{
							if (result.code == 1) {
								// 支付成功
								uni.showModal({
									title: '提示',
									content: '支付成功',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											uni.reLaunch({
												url: '/pages/indent/indent?xuan=0',
											});
										}
									}
								})
							} else {
								that.userinfo = ''
								uni.showToast({
									title: result.msg,
									icon: 'none',
									duration: 2000
								})
							}
						}
					}
				})
			},
			getList(){
				var that = this
				uni.showLoading({
					title:'加载中...'
				})
				uni.request({
					url: that.global.url+'api/qianyu_smfw/plugin/stored_lists',
					method: 'POST',
					header:{
						'site-id':that.global.site_id,
						'token': uni.getStorageSync('token')
					},
					data: {
						id: that.id
					},
					success(res) {
					    let result = res.data
					    if(result.code == 1){
							console.log(result.data)
							that.list = result.data.list
							that.user_money = result.data.user_money
					    }else{
					        uni.showToast({
					            title: result.msg,
					            icon:'none',
								duration: 2000
					        })
					    }
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			xuanClick(index){
				var that = this;
				console.log(index);
				console.log(that.xuan);
				if(that.xuan != index){
					that.xuan = index
					that.money = that.list[index].buy_price
					that.song_money = that.list[index].give_price - that.list[index].buy_price
				}else{
					that.xuan = -1;
					that.money = 0;
					that.song_money = 0;
				}
			},
			tiaozhuan(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #F3F1F1;
	}
	.divBa{
		height: 574rpx;
		z-index: 1;
		top: 0;
	}
</style>
